<template>
	<div class="w100 h100 flex-col p-t-26 p-l-10 p-r-10">
		<div class="f1 h0 p-b-10">
			<my-box id="box" class="h100" title="实时数据查询 ">
				<template #right>
					<my-input v-model="form.keyWord" :clearable="false" placeholder="搜索...">
						<template #suffix>
							<el-icon @click="refTable.reload()" class="pointer"><Search /></el-icon>
						</template>
					</my-input>
				</template>
				<MyListPanel ref="refTable" :total="state.total" :loadFn="loadFn">
					<template #default="{ page, size }">
						<my-table :data="state.list" :columns="state.columns">
							<template #index="{ $index }">
								<span style="color: #fff"> {{ $index + 1 + (page - 1) * size }}</span>
							</template>
						</my-table>
					</template>
				</MyListPanel>
			</my-box>
		</div>
	</div>
</template>

<script setup name="/monitoring/fire">
import { fireproofing } from '@a/fire.js'

let refTable = shallowRef(),
	form = ref({
		keyWord: ''
	}),
	state = reactive({
		total: 0,
		list: [],
		columns: [
			{
				label: '序号',
				prop: 'index',
				width: 60
			},
			{
				label: '日期',
				prop: 'date'
			},
			{
				label: '时间',
				prop: 'time'
			},
			{
				label: '类型',
				prop: 'monitoringType'
			},
			{
				label: '状态',
				prop: 'fireproofingState'
			},
			{
				label: '消息文本',
				prop: 'monitoringText'
			}
		]
	})
function loadFn(pageNum, pageSize) {
	fireproofing({ pageNum, pageSize, ...form.value }).then((res) => {
		state.total = res.data?.total
		state.list = res.data?.rows
	})
}
</script>
